<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
    <div id="box">
      <ul>
        <li v-for="data in datalist" :key="data.filmId">
          <h3>{{data.name}}</h3>
          <img :src="data.poster"/>
        </li>
      </ul>
      <child v-if="isCreated"></child>
    </div>
   

    <script type="text/javascript">

      Vue.component("child",{
        template:`<div id="aaa">
             child --{{title}}
            <button @click="title='1111111'">change1</button>
            <button @click="title='2222222'">change2</button>
        </div>`,

        data(){
          return {
            title:"00000",
            datalist:[],
            count:0
          }
        },

        methods:{
         
        },

        beforeCreate(){
          console.log("beforeCreate")
        },
        created(){
          console.log("created")
        },

        beforeMount(){
          console.log("beforeMount")
        },

        mounted(){
          
          console.log("mounted","访问dom,setInterval,window.onscroll, 监听事件 ajax")
        },

        beforeUpdate(){
          console.log("beforeUpdate")
        },

        updated(){
          console.log("updated","更新之后可以访问dom")
        
        },

        beforeDestroy(){
          console.log("beforeDestroy-clearInterval ,window.onscroll=null,$off");
        },

        destroyed(){
          console.log("destroyed--clearInterval ,window.onscroll=null,$off")
        }

      })

      
      var vm = new Vue({
        el: "#box",
        data:{
          isCreated:true,
          datalist:[]
        },

        mounted(){
          axios.get("json/test.json").then(res=>{
            console.log(res.data);
            this.datalist =res.data.data.films
          })
        }
        
      })

      // vm.$mount("#box")

     //
     //  vue组件 生命周期 ?
     //  vue组件的 钩子函数？
     //  vue组件的生命周期钩子函数？
    </script>
</body>
</html>